<template>
  <div class="feature-out">
    <div ref="searchDiv">
      <div class="filter-container">
        <el-input
          v-model="listQuery.value"
          size="small"
          placeholder="请输入模型名称或CODE进行查询"
          clearable
          style="width:260px;margin-right:20px;"
        />
        <el-button
          @click="handleFilter"
          size="small"
          type="primary"
          ref="btnQuery"
        >
          查询
        </el-button>
        <el-button
          @click="handleReset"
          size="small"
          type="primary"
          ref="btnRefresh"
        >
          重置
        </el-button>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-bottom: 12px;">
        <el-button type="primary" size="small" @click="handleQuoteModel">
          引用API模型
        </el-button>
        <el-button type="primary" size="small" @click="handleAddModel">
          模型导入
        </el-button>
      </div>
    </div>

    <el-table
      ref="multipleTable"
      :data="data"
      fit
      highlight-current-row
      :max-height="tableHeight"
      style="width: 100%;margin-bottom: 12px;"
      v-loading="isLoading"
    >
      <el-table-column
        label="模型CODE"
        min-width="130px"
        prop="modelCode"
        align="center"
      />
      <el-table-column
        label="模型名称"
        min-width="160px"
        prop="modelName"
        align="center"
      />
      <el-table-column label="状态" width="130px" prop="status" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? '可使用' : '未映射' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建人/修改人" width="180px" align="center">
        <template slot-scope="scope">
          {{ scope.row.createBy }}/{{ scope.row.updateBy }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createAt"
        align="center"
        width="200px"
      />
      <el-table-column
        label="更新时间"
        prop="updateAt"
        align="center"
        width="200px"
      />
      <el-table-column fixed="right" label="操作" align="center" width="240px">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="getParamsDetail(scope.row)"
          >
            参数详情
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="handleFeatureMap(scope.row)"
          >
            特征映射
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="handleQuoteDetail(scope.row)"
          >
            引用详情
          </el-button>
          <el-button type="text" size="mini" @click="deleteModel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />

    <!-- 参数详情 -->
    <ParamsDetail
      v-if="parameterVisible"
      @handleClose="handleClose"
      :modelCode="modelCode"
    />

    <!-- 特征映射 -->
    <FeatureMap
      v-if="featureMapVisible"
      :modelCode="modelCode"
      :getList="getModelList"
      @handleClose="handleClose"
    />

    <!-- 引用情况 -->
    <QuoteDetail
      v-if="quoteDetailVisible"
      :row="row"
      @handleClose="handleClose"
    />

    <!-- 模型导入 -->
    <AddModel
      v-if="addModelShow"
      @handleClose="handleClose"
      :getList="getModelList"
    />

    <!-- 引用API模型 -->
    <QuoteApiModel
      v-if="quoteApiShow"
      @handleClose="handleClose"
      :getList="getModelList"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import ParamsDetail from './ParamsDetail.vue'
import AddModel from './AddModel.vue'
import QuoteApiModel from './QuoteApiModel.vue'
import FeatureMap from './FeatureMap.vue'
import QuoteDetail from './QuoteDetail.vue'
import { debounce } from 'lodash'
import * as Api from '@/api/risksystem/feature/model'
import { getModelQuote } from '@/api/risksystem/feature/dmp'

export interface ITableData {
  id: number
  modelCode: string
  modelName: string
  status: number
  location: string
  createBy: string
  updateBy: string
  createAt: string
  updateAt: string
}

interface ListQuery {
  [propName: string]: any
}

type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}

@Component({
  components: {
    AddModel,
    ParamsDetail,
    FeatureMap,
    QuoteDetail,
    QuoteApiModel
  }
})
export default class ModelManage extends Vue {
  // 文件上传
  get uploadURL() {
    return ''
  }
  // 列表
  private data: ITableData[] = []
  private modelCode: string = ''
  private row: ITableData | {} = {}
  private total = 0
  // 默认查询对象
  private defaultQuery = {
    pageSize: 10,
    page: 1,
    value: undefined
  }
  private listQuery: ListQuery = {
    pageSize: 10,
    page: 1,
    value: undefined
  }
  private isLoading: boolean = false
  // 表格高度
  private tableHeight: any = null
  // 文件上传
  private addModelShow: boolean = false
  private parameterVisible: boolean = false
  private featureMapVisible: boolean = false
  private quoteVisible: boolean = false
  private quoteDetailVisible: boolean = false
  private quoteApiShow: boolean = false

  created() {
    this.getModelList()
  }

  mounted() {
    this.init()
  }

  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }

  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight -
        (this.$refs.searchDiv as HTMLElement).offsetHeight -
        300
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight -
          (this.$refs.searchDiv as HTMLElement).offsetHeight -
          300
      })
    }
  }

  // 列表数据
  private async getModelList() {
    this.isLoading = true
    try {
      const {
        data: { records, current: page, total }
      } = await Api.getModelList(this.listQuery)
      this.data = records
      this.listQuery = { ...this.listQuery, page }
      this.total = total
    } finally {
      this.isLoading = false
    }
  }
  private flatten(arr: any) {
    let arr1: any = []
    arr.forEach((val: any) => {
      if (Array.isArray(val)) {
        arr1 = arr1.concat(val)
      } else {
        arr1.push(val)
      }
    })
    return arr1
  }
  // 删除
  private async deleteModel({ modelCode }: ITableData) {
    this.$confirm('确认删除当前模型？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const { data } = await getModelQuote({ modelCode })
      if (this.flatten(Object.values(data)).length) {
        return this.$alert('无法删除正在被引用的模型，请先解除引用关系！', {
          confirmButtonText: '知道了',
          type: 'error'
        })
      }
      await Api.deleteModel({ modelCode })
      this.$message.success('删除成功!')
      this.getModelList()
    })
  }

  // 添加模型
  private handleAddModel() {
    this.addModelShow = true
  }

  // 引用APP模型
  private handleQuoteModel() {
    this.quoteApiShow = true
  }

  // 参数详情
  private getParamsDetail({ modelCode }: ITableData) {
    this.parameterVisible = true
    this.modelCode = modelCode
  }

  // 特征映射
  private async handleFeatureMap({ modelCode }: ITableData) {
    this.featureMapVisible = true
    this.modelCode = modelCode
  }

  // 引用详情
  private handleQuoteDetail(row: ITableData) {
    this.quoteDetailVisible = true
    this.row = row
  }

  // 查询
  private handleFilter() {
    this.listQuery.page = 1
    this.getModelList()
  }

  // 重置
  private handleReset() {
    this.listQuery = Object.assign({}, this.defaultQuery)
    this.getModelList()
  }

  // 分页
  private handleSizeChange(val: number) {
    this.listQuery.pageSize = val
    this.getModelList()
  }
  private handleCurrentChange(val: number) {
    this.listQuery.page = val
    this.getModelList()
  }

  // 关闭弹窗
  private handleClose() {
    this.parameterVisible = false
    this.addModelShow = false
    this.featureMapVisible = false
    this.quoteDetailVisible = false
    this.quoteApiShow = false
  }
}
</script>
<style lang="scss" scoped>
.feature-out {
  padding: 20px;
}
</style>
